<template>
  <el-card class="post-item-card" :body-style="{ padding: '16px' }" shadow="never">
    <div class="post-container">
      <div class="post-text-content">
        <div slot="header" class="post-title">
          <span style="font-weight: bold; font-size: 1.2em">{{ post.title }}</span>
        </div>
        <div v-if="post.tags.length" class="post-tags">
          <span v-for="(tag, tIdx) in post.tags" :key="tIdx">#{{ tag }}</span>
        </div>
        <div class="post-content-wrapper">
          <div class="post-main-content">
            <div class="post-content">
              {{ post.desc }}
            </div>
            <div class="post-meta">
              <span>作者：{{ post.author }}</span>
              <span>
                浏览{{ post.views }}k · 
                <span class="interactive-text" @click="handleComment">评论{{ post.comments }}</span> · 
                <span class="interactive-text" @click="handleLike">点赞{{ post.likes }}</span>
              </span>
            </div>
          </div>
        </div>
      </div>
      <div class="post-cover">
        <el-image 
          :src="post.cover || defaultCover" 
          alt="post cover" 
          fit="cover">
          <template #error>
            <div class="image-slot">
              <el-icon><IconPicture /></el-icon>
            </div>
          </template>
        </el-image>
      </div>
    </div>
  </el-card>
</template>

<script setup>
import { ref, computed } from 'vue';
import { ElCard, ElButton, ElImage } from 'element-plus';
import { Picture as IconPicture } from '@element-plus/icons-vue'
import dayjs from 'dayjs';

const props = defineProps({ 
  post: { 
    type: Object, 
    required: true, 
    default: () => ({ 
      id: 0, 
      title: '', 
      author: '', 
      views: 0, 
      comments: 0, 
      likes: 0, 
      tags: [], 
      desc: '', 
      cover: '' 
    }) 
  },
  defaultCover: { 
    type: String, 
    default: 'https://via.placeholder.com/150' // 设置默认封面图片地址
  }
}); 

const formatTime = (time) => { 
  return dayjs(time).format('YYYY - MM - DD HH:mm:ss'); 
}; 

const handleLike = () => { 
  const newPost = { ...props.post };
  newPost.likeCount++;
  console.log('点赞成功，当前点赞数：', newPost.likeCount);
}; 

const handleComment = () => { 
  console.log('点击评论，可进行评论相关交互');
}; 
</script>

<style scoped>
.post-item-card { 
  margin-bottom: 20px; 
}

.post-title { 
  text-align: left; /* 标题靠左对齐 */ 
}

.post-container { 
  display: flex; 
  justify-content: space-between; 
  gap: 20px; 
  align-items: flex-start; 
}

.post-text-content { 
  flex: 1; 
  display: flex; 
  flex-direction: column; 
  align-items: flex-start; /* 确保文本内容全部靠左 */ 
}

.post-content-wrapper { 
  display: block; 
  width: 100%; /* 确保宽度与父容器一致 */ 
}

.post-main-content { 
  display: flex; 
  flex-direction: column; 
  align-items: flex-start; 
  width: 100%; /* 确保宽度与父容器一致 */ 
}

.post-meta {
    gap: 20px; 
    margin-top: 12px;
    color: #999;
    text-align: left; /* 明确设置元信息向左对齐 */
}
.post-cover { 
  width: 150px; /* 封面宽度 */ 
  height: auto; /* 高度自适应 */ 
  align-self: stretch; /* 使图片高度填充容器 */ 
  display: block; /* 确保与左边容器以 block 对齐 */ 
}

.post-cover .el-image { 
  width: 100%; 
  height: 100%; 
  display: block; 
}

.image-slot { 
  display: flex; 
  justify-content: center; 
  align-items: center; 
  width: 100%; 
  height: 100%; 
  background: var(--el-fill-color-light); 
  color: var(--el-text-color-secondary); 
  font-size: 30px; 
}

.image-slot .el-icon { 
  font-size: 30px; 
}
.interactive-text { 
  color: inherit; 
  cursor: pointer; 
}
.interactive-text:hover { 
  color: #409EFF; 
}
.post-tags { 
  margin-bottom: 12px; 
  color: #999; 
  text-align: left; /* 明确设置标签向左对齐 */ 
}
.post-tags span { 
  margin-right: 8px; 
}
</style>